import { Component } from 'react'
import { Card ,Form, Input, Button, Checkbox, message  } from 'antd'
import styles from './index.module.scss'
import logo from 'assets/logo.png'
import { loginAPI } from 'api/user'
import {setToken} from '../../utils/storage'

export default class Login extends Component {
  onFinish=async(values) => {
    console.log(values);
    try{
      const res =  await loginAPI(values)
      console.log('res  ----->  ', res);
      // 存储token
      // localStorage.setItem('geek-pc-token',res.data.token)
      setToken(res.data.token)
      message.success('登录成功')
      // 跳转到首页
      this.props.history.push('/')
    }catch{
      message.error(error.response.data.message)
    }
  };
  
  render() {
    return <div>
        <div className={styles.login}>
        <Card className={styles['login-container']}>
          <img className={styles["login-logo"]} src={logo} alt="" />
          <Form  autoComplete='off' onFinish={this.onFinish} initialValues={{
            mobile:'15115432704',
            code:'246810',
            agree:true
          }}>
            <Form.Item
             name="mobile"
             rules={[
              { required: true, message: '内容不能为空' },
              { pattern:/^1[3-9]\d{9}$/,message: '手机号码格式错误'}
             ]}
             >
              <Input placeholder="请输入手机号" />
            </Form.Item>
            <Form.Item
               name="code"
               rules={[{ required: true, message: '验证码不能为空' },
               { pattern:/^\d{6}$/,message: '验证码格式错误'}]}
               >
              <Input placeholder="请输入验证码
              " />
            </Form.Item>
            <Form.Item  valuePropName="checked"
            name='agree'
            rules={[
              {
                validator:(_,value)=>
                  value===true? Promise.resolve():Promise.reject(new Error('请阅读并同意[用户协议]和[隐私条款]'))
                }
            ]}
            >
            <Checkbox>我已阅读并res.data.token同意[用户协议]和[隐私条款]</Checkbox>
            </Form.Item>
            <Form.Item>
            <Button type="primary" htmlType="submit" block>登录</Button>
            </Form.Item>
          </Form>
        </Card>
        </div>
     
    </div>
    
  }
}
